<template>
  <div class="app">
    <div class="head">
      <div class="bg"></div>
      <div class="pa">
        <div class="type">{{ sheepInfo.agriProductBreed ? sheepInfo.agriProductBreed.name : '' }}</div>
        <div class="info">
          <img src="@/assets/img/sheep_head.png" alt="" />
          <div class="i3">
            <div class="num">畜禽标识编号：{{ sheepInfo.preventionNo }}</div>

            <div class="t2">
              <p>厂内耳标号：{{ sheepInfo.earLabelNo }}</p>
              <p>项圈号： {{ sheepInfo.necklaceNo }}</p>
            </div>
            <div class="t2">
              <p>性别：{{ sheepInfo.sex }}</p>
              <p>羊舍：{{ sheepInfo.houseInfo ? sheepInfo.houseInfo.houseName : '' }}</p>
            </div>
            <div class="t2">
              <p>养殖区域：{{ sheepInfo.breedingArea ? sheepInfo.breedingArea : '' }}</p>
              <p>生长阶段：{{ sheepInfo.physiologicalStage ? sheepInfo.physiologicalStage : '' }}</p>
            </div>
            <div class="t2">
              <p>当前阶段天数：{{ sheepInfo.physiologicalStageShow ? sheepInfo.physiologicalStageShow : '' }}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="title">
      <div class="tiao"></div>
      <div class="jilu">
        <span>养殖记录</span>
        <div class="check" @click="show = true">
          <span>{{ year }}</span>
          <img src="@/assets/img/xia.png" alt="" />
        </div>
      </div>
    </div>
    <!-- 生长记录 ok -->
    <div class="jilu_item">
      <div class="t1" @click="growthFlag = !growthFlag">
        <div class="t1_l">
          <img src="@/assets/img/sd/a1.png" alt="" />
          <span>生长记录({{ growthList.length }})</span>
        </div>
        <div class="t1_r">
          <img src="@/assets/img/shang.png" v-if="growthFlag" alt="" />
          <img src="@/assets/img/xia.png" v-else alt="" />
        </div>
      </div>
      <div class="t2" v-if="growthFlag">
        <div class="info" v-for="item in growthList" :key="item.id">
          <div>{{ item.recordDate }}</div>
          <p>体重（kg）:{{ item.weight }}</p>
          <p>体高（cm）:{{ item.height }}</p>
          <p>体斜长（cm）:{{ item.obliqueLength }}</p>
          <p>十字部高（cm）:{{ item.crossHeight }}</p>
          <p>胸围（cm）:{{ item.bustSize }}</p>
          <p>管围（cm）:{{ item.tubeSize }}</p>
          <p>创建人：{{ item.createdByName }}</p>
          <p>创建时间：{{ item.createTime }}</p>
        </div>
      </div>
    </div>
    <!-- 疫苗接种记录 ok -->
    <div class="jilu_item">
      <div class="t1" @click="vaccineFlag = !vaccineFlag">
        <div class="t1_l">
          <img src="@/assets/img/sd/a2.png" alt="" />
          <span>疫苗接种记录({{ vaccineList.length }})</span>
        </div>
        <div class="t1_r">
          <img src="@/assets/img/shang.png" v-if="vaccineFlag" alt="" />
          <img src="@/assets/img/xia.png" v-else alt="" />
        </div>
      </div>
      <div class="t2" v-if="vaccineFlag">
        <div class="info" v-for="item in vaccineList" :key="item.id">
          <div>{{ item.inoculateDate }}</div>
          <p>接种批次：{{ item.inoculateBatch }}</p>
          <p>疫苗名称：{{ item.vaccinName }}</p>
          <p>使用剂量：{{ item.vaccinUseDose }}</p>
          <p>单位：{{ item.vaccinUseUnitName }}</p>
          <p>创建人：{{ item.createdByName }}</p>
          <p>创建时间：{{ item.createTime }}</p>
        </div>
      </div>
    </div>
    <!-- 转舍记录 ok-->
    <div class="jilu_item">
      <div class="t1" @click="whirlFlag = !whirlFlag">
        <div class="t1_l">
          <img src="@/assets/img/sd/a3.png" alt="" />
          <span>转舍记录({{ whirlList.length }})</span>
        </div>
        <div class="t1_r">
          <img src="@/assets/img/shang.png" v-if="whirlFlag" alt="" />
          <img src="@/assets/img/xia.png" v-else alt="" />
        </div>
      </div>
      <div class="t2" v-if="whirlFlag">
        <div class="info" v-for="item in whirlList" :key="item.id">
          <div>{{ item.changeCircleDate }}</div>
          <p>转出舍：{{ item.changeOutHouseName }}</p>

          <p>转入舍：{{ item.changeToHouseName }}</p>
          <p>转舍原因：{{ item.changeCricleReasonName }}</p>
          <p>创建人：{{ item.createdByName }}</p>
          <p>创建时间：{{ item.createTime }}</p>
        </div>
      </div>
    </div>
    <!-- 离场记录 ok-->
    <div class="jilu_item">
      <div class="t1" @click="leaveFlag = !leaveFlag">
        <div class="t1_l">
          <img src="@/assets/img/sd/a4.png" alt="" />
          <span>离场记录({{ leaveList.length }})</span>
        </div>
        <div class="t1_r">
          <img src="@/assets/img/shang.png" v-if="leaveFlag" alt="" />
          <img src="@/assets/img/xia.png" v-else alt="" />
        </div>
      </div>
      <div class="t2" v-if="leaveFlag">
        <div class="info" v-for="item in leaveList" :key="item.id">
          <div>{{ item.departureDate }}</div>
          <p>离场原因：{{ item.departureReasonName }}</p>
          <p>创建人：{{ item.createdByName }}</p>
          <p>创建时间：{{ item.createTime }}</p>
        </div>
      </div>
    </div>
    <!-- 疾病诊疗记录 ok-->
    <div class="jilu_item">
      <div class="t1" @click="diseaseFlag = !diseaseFlag">
        <div class="t1_l">
          <img src="@/assets/img/sd/a5.png" alt="" />
          <span>疾病诊疗记录({{ diseaseList.length }})</span>
        </div>
        <div class="t1_r">
          <img src="@/assets/img/shang.png" v-if="diseaseFlag" alt="" />
          <img src="@/assets/img/xia.png" v-else alt="" />
        </div>
      </div>
      <div class="t2" v-if="diseaseFlag">
        <div class="info" v-for="item in diseaseList" :key="item.id">
          <div>{{ item.treatDate }}</div>
          <p>疫病类型：{{ item.diseaseTypeCode ? item.diseaseTypeCode.name : '' }}</p>
          <p>疫病描述：{{ item.diseaseDescribe }}</p>

          <p>疫病名称：{{ item.diseaseName }}</p>
          <p>使用药品：{{ item.drugUseName }}</p>
          <p>用药方法：{{ item.drugWayCode ? item.drugWayCode.name : '' }}</p>

          <p>使用剂量：{{ item.drugUseDose }}</p>
          <p>单位：{{ item.drugUnitCode ? item.drugUnitCode.name : '' }}</p>
          <p>用药弃奶天数：{{ item.abandonNum }}</p>
          <p>创建人：{{ item.createdByName }}</p>

          <p>创建时间：{{ item.createTime }}</p>
        </div>
      </div>
    </div>
    <!-- 饲喂记录 ok-->
    <div class="jilu_item">
      <div class="t1" @click="feedingFlag = !feedingFlag">
        <div class="t1_l">
          <img src="@/assets/img/sd/a6.png" alt="" />
          <span>饲喂记录({{ feedingList.length }})</span>
        </div>
        <div class="t1_r">
          <img src="@/assets/img/shang.png" v-if="feedingFlag" alt="" />
          <img src="@/assets/img/xia.png" v-else alt="" />
        </div>
      </div>
      <div class="t2" v-if="feedingFlag">
        <div class="info" v-for="item in feedingList" :key="item.id">
          <div>{{ item.useStartDate }}</div>
          <p>饲料名称：{{ item.forageName }}</p>
          <p>用量：{{ item.dosage }}kg</p>

          <p>创建人：{{ item.createdByName }}</p>
          <p>创建时间：{{ item.createTime }}</p>
        </div>
      </div>
    </div>
    <!-- 病死无害化处理记录 ok-->
    <div class="jilu_item">
      <div class="t1" @click="dieFlag = !dieFlag">
        <div class="t1_l">
          <img src="@/assets/img/sd/a7.png" alt="" />
          <span>病死无害化处理记录({{ dieList.length }})</span>
        </div>
        <div class="t1_r">
          <img src="@/assets/img/shang.png" v-if="dieFlag" alt="" />
          <img src="@/assets/img/xia.png" v-else alt="" />
        </div>
      </div>
      <div class="t2" v-if="dieFlag">
        <div class="info" v-for="item in dieList" :key="item.id">
          <div>{{ item.recordDate }}</div>
          <p>处理或死亡原因：{{ item.dieType ? item.dieType.name : '' }}</p>
          <p>处理方式：{{ item.handleMethod ? item.handleMethod.name : '' }}</p>
          <p>创建人：{{ item.createdByName }}</p>
          <p>创建时间：{{ item.createTime }}</p>
        </div>
      </div>
    </div>
    <!-- 保险记录 ok-->
    <div class="jilu_item">
      <div class="t1" @click="insuranceFlag = !insuranceFlag">
        <div class="t1_l">
          <img src="@/assets/img/sd/a8.png" alt="" />
          <span>保险记录({{ insuranceList.length }})</span>
        </div>
        <div class="t1_r">
          <img src="@/assets/img/shang.png" v-if="insuranceFlag" alt="" />
          <img src="@/assets/img/xia.png" v-else alt="" />
        </div>
      </div>
      <div class="t2" v-if="insuranceFlag">
        <div class="info" v-for="item in insuranceList" :key="item.id">
          <div>{{ item.buyDate }}</div>
          <p>保险名称：{{ item.insuranceName }}</p>
          <p>创建人：{{ item.createdByName }}</p>
          <p>创建时间：{{ item.createTime }}</p>
        </div>
      </div>
    </div>

    <!-- 配种记录 ok-->
    <div class="jilu_item">
      <div class="t1" @click="breedingFlag = !breedingFlag">
        <div class="t1_l">
          <img src="@/assets/img/sd/a9.png" alt="" />
          <span>配种记录({{ breedingList.length }})</span>
        </div>
        <div class="t1_r">
          <img src="@/assets/img/shang.png" v-if="breedingFlag" alt="" />
          <img src="@/assets/img/xia.png" v-else alt="" />
        </div>
      </div>
      <div class="t2" v-if="breedingFlag">
        <div class="info" v-for="item in breedingList" :key="item.id">
          <div>{{ item.inoculateDate }}</div>
          <p>发情日期：{{ item.estrusDate }}</p>
          <p>配种方式：{{ item.breedType ? item.breedType.name : '' }}</p>
          <p v-if="sheepInfo.sex === '母'">配种公羊耳标号：{{ item.fatherEarLabelNo }}</p>
          <p v-if="sheepInfo.sex === '公'">配种母羊耳标号：{{ item.motherEarLabelNo }}</p>

          <p>创建人：{{ item.createdByName }}</p>
          <p>创建时间：{{ item.createTime }}</p>
        </div>
      </div>
    </div>

    <!-- 受孕确认记录 ok-->
    <div class="jilu_item" v-if="sheepInfo.sex === '母'">
      <div class="t1" @click="conceptionFlag = !conceptionFlag">
        <div class="t1_l">
          <img src="@/assets/img/sd/a10.png" alt="" />
          <span>受孕确认记录({{ conceptionList.length }})</span>
        </div>
        <div class="t1_r">
          <img src="@/assets/img/shang.png" v-if="conceptionFlag" alt="" />
          <img src="@/assets/img/xia.png" v-else alt="" />
        </div>
      </div>
      <div class="t2" v-if="conceptionFlag">
        <div class="info" v-for="item in conceptionList" :key="item.id">
          <div>{{ item.verifyDate }}</div>
          <p>是否受孕：是</p>
          <p>创建人：{{ item.createdByName }}</p>
          <p>创建时间：{{ item.createTime }}</p>
        </div>
      </div>
    </div>

    <!-- 产羔记录 ok-->
    <div class="jilu_item" v-if="sheepInfo.sex === '母'">
      <div class="t1" @click="lambingFlag = !lambingFlag">
        <div class="t1_l">
          <img src="@/assets/img/sd/a11.png" alt="" />
          <span>产羔记录({{ lambingList.length }})</span>
        </div>
        <div class="t1_r">
          <img src="@/assets/img/shang.png" v-if="lambingFlag" alt="" />
          <img src="@/assets/img/xia.png" v-else alt="" />
        </div>
      </div>
      <div class="t2" v-if="lambingFlag">
        <div class="info" v-for="item in lambingList" :key="item.id">
          <div>{{ item.lambDate }}</div>
          <p>
            产羔数量：{{ item.maleLambNum }}/公；{{ item.femaleLambNum }}/母；{{ item.weakLambNum }}/弱羔数；{{
              item.stillbirthNum
            }}/死胎数
          </p>
          <p>健壮羔羊数量：{{ item.robustMaleLambNum }}/公；{{ item.robustFemaleLambNum }}/母</p>
          <p>创建人：{{ item.createdByName }}</p>
          <p>创建时间：{{ item.createTime }}</p>
        </div>
      </div>
    </div>

    <!-- 产奶记录 ok-->
    <div class="jilu_item" v-if="sheepInfo.sex === '母'">
      <div class="t1" @click="milkFlag = !milkFlag">
        <div class="t1_l">
          <img src="@/assets/img/sd/a12.png" alt="" />
          <span>产奶记录({{ milkList.length }})</span>
        </div>
        <div class="t1_r">
          <img src="@/assets/img/shang.png" v-if="milkFlag" alt="" />
          <img src="@/assets/img/xia.png" v-else alt="" />
        </div>
      </div>
      <div class="t2" v-if="milkFlag">
        <div class="info" v-for="item in milkList" :key="item.id">
          <div>{{ item.milkProductionDate }}</div>
          <p>早产奶量（kg）：{{ item.morningMilkProduction }}</p>
          <p>晚产奶量（kg）：{{ item.nightMilkProduction }}</p>

          <p>日产奶量（kg）：{{ item.dailyMilkProduction }}</p>
          <p>创建人：{{ item.createdByName }}</p>
          <p>创建时间：{{ item.createTime }}</p>
        </div>
      </div>
    </div>
    <!-- 采精记录 ok-->
    <div class="jilu_item" v-if="sheepInfo.sex === '公'">
      <div class="t1" @click="ejaculationsFlag = !ejaculationsFlag">
        <div class="t1_l">
          <img src="@/assets/img/sd/a13.png" alt="" />
          <span>采精记录({{ ejaculationsList.length }})</span>
        </div>
        <div class="t1_r">
          <img src="@/assets/img/shang.png" v-if="ejaculationsFlag" alt="" />
          <img src="@/assets/img/xia.png" v-else alt="" />
        </div>
      </div>
      <div class="t2" v-if="ejaculationsFlag">
        <div class="info" v-for="item in ejaculationsList" :key="item.id">
          <div>{{ item.semenDate }}</div>
          <p>采精量（ml）：{{ item.semenMilliliters }}</p>
          <p>精子活力（%）：{{ item.spermMotility }}</p>
          <p>稀释倍数：{{ item.dilution }}</p>

          <p>创建人：{{ item.createdByName }}</p>
          <p>创建时间：{{ item.createTime }}</p>
        </div>
      </div>
    </div>
    <!-- 其他记录 -->
    <div class="jilu_item">
      <div class="t1" @click="otherFlag = !otherFlag">
        <div class="t1_l">
          <img src="@/assets/img/x12.png" alt="" />
          <span>其他记录({{ otherList.length }})</span>
        </div>
        <div class="t1_r">
          <img src="@/assets/img/shang.png" v-if="otherFlag" alt="" />
          <img src="@/assets/img/xia.png" v-else alt="" />
        </div>
      </div>
      <div class="t2" v-if="otherFlag">
        <div class="content" v-for="content in otherList" :key="content.id">
          <div class="flex-between line-height-3">
            <div class="col-333333 font-bold-500 font-15 m-r-10">{{ content.operation || '' }}</div>
          </div>
          <div class="flex-between font-13">
            <div class="col-666666 m-r-10 multi-text-overrun" style="line-height: 18px">
              {{ content.content || '' }}
            </div>
          </div>
          <div class="flex-between font-13 line-height-3">
            <div class="col-999999 line-text-out text-right">创建人： {{ content.createdByName || '' }}</div>
            <div class="col-999999 m-r-10 line-text-out">创建时间：{{ content.createTime || '' }}</div>
          </div>
        </div>
      </div>
    </div>
    <div style="height: 20px"></div>
    <!-- 选择时间 -->
    <van-popup v-model="show" position="bottom">
      <van-picker
        :default-index="cindex"
        title="选择年份"
        show-toolbar
        :columns="columns"
        @confirm="handleConfirm"
        @cancel="handleCancel"
      />
    </van-popup>
  </div>
</template>

<script>
import { DatetimePicker, Popup, Picker } from 'vant'
import {
  sheepDetail,
  growRecordListPage,
  vaccinationRecordListPage,
  breedRecordListPage,
  changeCircleRecordListPage,
  departureRecordListPage,
  pregnancyRecordListPage,
  feedingRecordListPage,
  lambingRecordListPage,
  dieHarmlesshandleListPageOwn,
  insurancerecordListPage,
  milkProductionRecordListPage,
  diseaseTreatRecordListPage,
  semenRecordListPage,
  otherListPage
} from '@/api/record'
import { getValue } from '@/utils/auth'
import dayjs from 'dayjs'
import { getHandle, postHandle } from '@/api'
export default {
  name: 'App',
  components: {
    [DatetimePicker.name]: DatetimePicker,
    [Popup.name]: Popup,
    [Picker.name]: Picker
  },
  data() {
    return {
      show: false, // 弹出框
      currentDate: new Date(),
      year: new Date().getFullYear(),
      sheepInfo: {}, // 羊信息
      sheepId: getValue('sheepRecordInfoId'),
      growthList: [], // 生长记录
      growthFlag: false, // 生长记录开关
      vaccineList: [], // 疫苗接种记录
      vaccineFlag: false, //
      breedingList: [], // 配种
      breedingFlag: false,
      whirlList: [], // 转圈记录
      whirlFlag: false, //
      leaveList: [], // 离场
      leaveFlag: false,
      conceptionList: [], // 受孕确认
      conceptionFlag: false,
      feedingList: [], // 饲喂
      feedingFlag: false,
      lambingList: [], // 产羔
      lambingFlag: false,
      diseaseList: [], // 疾病诊疗
      diseaseFlag: false,
      dieList: [], // 病死无害化处理记录
      dieFlag: false,
      insuranceList: [], // 保险记录
      insuranceFlag: false,
      ejaculationsList: [], // 采精记录
      ejaculationsFlag: false,
      milkList: [], // 产奶
      milkFlag: false,
      otherFlag: false,
      otherList: [], // 其他
      currentYear: dayjs(new Date()).format('YYYY'),
      cindex: 0,
      columns: [
        2003,
        2004,
        2005,
        2006,
        2007,
        2008,
        2009,
        2010,
        2011,
        2012,
        2013,
        2014,
        2015,
        2016,
        2017,
        2018,
        2019,
        2020,
        2021,
        '全部年份',
        2022,
        2023,
        2024,
        2025,
        2026,
        2027
      ]
    }
  },
  created() {
    this.cindex = this.columns.indexOf(Number(this.currentYear))
    // this.columns.indexOf(currentYear)
    this.laodSheepInfo()
    this.loadDatas()
  },
  methods: {
    // 获取羊信息
    laodSheepInfo() {
      const id = getValue('sheepRecordInfoId')
      sheepDetail(id).then(res => {
        if (res.status === 0) {
          this.sheepInfo = res.data
        }
      })
    },
    loadDatas() {
      this.handleOpen1()
      this.handleOpen2()

      this.handleOpen3()

      this.handleOpen4()

      this.handleOpen5()

      this.handleOpen6()

      this.handleOpen7()

      this.handleOpen8()

      this.handleOpen9()

      this.handleOpen10()

      this.handleOpen11()

      this.handleOpen12()
      this.handleOpen13()
      this.handleOpen99()
    },
    // 选择年份
    handleConfirm(v) {
      this.year = v
      this.show = false
      this.loadDatas()
    },
    dateRangeFun() {
      const data = {
        dateRange: `${this.year}-01-01,${this.year}-12-31`,
        individualInfoId: this.sheepId
      }
      if (this.year === '全部年份') {
        data.dateRange = ''
      }
      return data
    },
    // 生长记录---打开关闭
    handleOpen1() {
      const data = this.dateRangeFun()
      growRecordListPage(data).then(res => {
        if (res.status === 0) {
          this.growthList = res.data.rows
        }
      })
    },
    // 疫苗接种记录---打开关闭
    handleOpen2() {
      const data = this.dateRangeFun()
      vaccinationRecordListPage(data).then(res => {
        if (res.status === 0) {
          this.vaccineList = res.data.rows
        }
      })
    },
    // 配种记录---打开关闭
    handleOpen3() {
      const data = this.dateRangeFun()
      breedRecordListPage(data).then(res => {
        if (res.status === 0) {
          this.breedingList = res.data.rows
        }
      })
    },
    // 其他记录---打开关闭
    handleOpen99() {
      const data = this.dateRangeFun()
      otherListPage(data).then(res => {
        if (res.status === 0) {
          this.otherList = res.data.rows
        }
      })
    },
    // 转圈记录---打开关闭
    handleOpen4() {
      const data = this.dateRangeFun()
      changeCircleRecordListPage(data).then(res => {
        if (res.status === 0) {
          this.whirlList = res.data.rows
        }
      })
    },
    // 离场记录---打开关闭
    handleOpen5() {
      const data = this.dateRangeFun()
      departureRecordListPage(data).then(res => {
        if (res.status === 0) {
          this.leaveList = res.data.rows
        }
      })
    },
    // 受孕确认记录---打开关闭
    handleOpen6() {
      const data = this.dateRangeFun()
      pregnancyRecordListPage(data).then(res => {
        if (res.status === 0) {
          this.conceptionList = res.data.rows
        }
      })
    },
    // 饲喂记录---打开关闭
    handleOpen7() {
      const data = this.dateRangeFun()
      data.useDateRange = data.dateRange
      feedingRecordListPage(data).then(res => {
        if (res.status === 0) {
          this.feedingList = res.data.rows
        }
      })
    },
    // 产羔记录---打开关闭
    handleOpen8() {
      const data = this.dateRangeFun()
      lambingRecordListPage(data).then(res => {
        if (res.status === 0) {
          this.lambingList = res.data.rows
        }
      })
    },

    // 病死无害化处理记录---打开关闭
    handleOpen9() {
      const data = this.dateRangeFun()
      dieHarmlesshandleListPageOwn(data).then(res => {
        if (res.status === 0) {
          this.dieList = res.data.rows
        }
      })
    },
    // 保险记录---打开关闭
    handleOpen10() {
      const data = this.dateRangeFun()
      insurancerecordListPage(data).then(res => {
        if (res.status === 0) {
          this.insuranceList = res.data.rows
        }
      })
    },
    // 产奶记录---打开关闭
    handleOpen11() {
      const data = this.dateRangeFun()
      milkProductionRecordListPage(data).then(res => {
        if (res.status === 0) {
          this.milkList = res.data.rows
        }
      })
    },
    // 疾病诊疗记录--打开关闭
    handleOpen12() {
      const data = this.dateRangeFun()
      diseaseTreatRecordListPage(data).then(res => {
        if (res.status === 0) {
          this.diseaseList = res.data.rows
        }
      })
    },
    // 采精记录--打开关闭
    handleOpen13() {
      const data = this.dateRangeFun()
      semenRecordListPage(data).then(res => {
        if (res.status === 0) {
          this.ejaculationsList = res.data.rows
        }
      })
    },
    // 关闭
    handleCancel() {
      this.show = false
    }

    // this.breedingFlag = !this.breedinghFlag
  }
}
</script>
<style lang='scss' scoped>
:v-deep div.van-popup {
  display: none;
}
::v-deep .van-picker__confirm {
  color: #37b5b5;
}
.jilu_item {
  width: 90%;
  margin: 0 auto;
  margin-top: 10px;
  background-color: #fff;
  border-radius: 6px;
  .t2 {
    border-top: 1px solid #eeeeee;
    .info:last-child {
      margin-bottom: 0;
    }
    .info {
      background-color: #fafafa;
      border-radius: 10px;
      padding: 10px;
      box-sizing: border-box;
      margin-bottom: 10px;

      div {
        font-size: 14px;
        color: #333333;
        margin-bottom: 10px;
      }
      p {
        font-size: 13px;
        color: #999999;
        margin-bottom: 10px;
      }
      p:last-child {
        margin-bottom: 0;
      }
    }
    padding: 10px 10px 15px 10px;
    box-sizing: border-box;
  }
  .t1 {
    display: flex;
    align-items: center;
    height: 45px;
    padding: 0 20px 0 10px;
    box-sizing: border-box;
    justify-content: space-between;
    .t1_l {
      display: flex;
      align-items: center;
      img {
        width: 14px;
        height: 14px;
        margin-right: 5px;
      }
      span {
        font-size: 15px;
        color: #333333;
      }
    }
    .t1_r {
      img {
        width: 8px;
        height: 8px;
      }
    }
  }
}
.title {
  display: flex;
  position: relative;
  margin-bottom: 14px;
  margin-top: 14px;
  .tiao {
    width: 4px;
    height: 14px;
    background-color: #00b8b6;
    border-radius: 1px;
  }
  .jilu {
    width: 90%;
    display: flex;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    justify-content: space-between;
    span {
      color: #333333;
      font-size: 16px;
    }
    .check {
      display: flex;
      align-items: center;
      span {
        color: #37b5b5;
        margin-right: 10px;
      }
      img {
        width: 8px;
        height: 8px;
      }
    }
  }
}
.head {
  position: relative;
  margin-bottom: 55px;
  .bg {
    height: 110px;
    background-color: #37b5b5;
  }
  .pa {
    width: 90%;
    padding: 20px 10px;
    box-sizing: border-box;
    background-color: #fff;
    position: absolute;
    border-radius: 10px;
    left: 50%;
    top: 10px;
    transform: translate(-50%, 0);
    .type {
      position: absolute;
      right: 0;
      top: 0;
      padding: 3px 10px;
      box-sizing: border-box;
      background-color: rgba(55, 181, 181, 0.15);
      color: #37b5b5;
      border-radius: 0 0 0 10px;
    }
    .info {
      display: flex;
      align-items: center;
      img {
        width: 46px;
        height: 46px;
        margin-right: 12px;
      }
      .i3 {
        width: calc(100% - 58px);
        height: 100px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .num {
          font-size: 15px;
        }
        .name {
          font-size: 15px;
          color: #333;
          margin-bottom: 5px;
        }
        .t2 {
          color: #666666;
          font-size: 13px;
          display: flex;
          p {
            flex: 1;
          }
        }
      }
    }
  }
}
.content {
  background-color: #fafafa;
  padding: 10px;
  border-radius: 10px;
  margin-bottom: 10px;
}
</style>
